<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas</title>
  <style>
    canvas {
      box-shadow: 5px 5px 10px #CCC;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="800" height="1200">
    你的浏览器太low了~
  </canvas>
  <script>

    window.onload = function () {

      var canvas = document.getElementById('canvas')
      if (canvas.getContext) {
        var cvsCtx = canvas.getContext('2d');

        var img = new Image();
        img.src = './images/timg2.jpeg';

        var img2 = new Image();
        img2.src = './images/100.png';

        // 注意：在绘制图像时，一定要确认这张图片加载完成(onload)，才能渲染在canvas上，否则是不会渲染的
        img.onload = function () {
          // 1、绘制图片drawImage(source, x, y, w, h)，不同参数传递绘图不同
          cvsCtx.drawImage(img, 20, 20); // 原图大小填充在画布里，drawImage(source, x, y)
          cvsCtx.drawImage(img, 20, 360, 100, 100); // 拉伸成100*100的图片填充画布，drawImage(source, x, y, w, h)
          cvsCtx.drawImage(img, 70, 140, 120, 260, 50, 480, 100, 100); // drawImage(source, sx, sy, sw, sh, x, y, w, h)前面四个是裁剪参数，裁剪出来的图像会拉伸放至后面的图像里
        }
        // 注意：在绘制图像时，一定要确认这张图片加载完成(onload)，才能渲染在canvas上，否则是不会渲染的
        img2.onload = function () {
          // 2、平铺图片createPattern(imgSource, repeatType)
          var ptrn = cvsCtx.createPattern(img2, 'repeat');
          cvsCtx.fillStyle = ptrn;
          cvsCtx.fillRect(20, 600, 800, 500);
        }
      } else {
        alert('你的浏览器太low了~')
      }
    }
  </script>

</body>

</html>